<template>
  <Temp @clear="clear" @close="close">
    <div class="sunshine">
      <el-form
        ref="form"
        class="form"
        :model="formData"
        label-width="50px"
      >
        <el-form-item label="日期：">
          <el-date-picker
            @change="clear"
            v-model="formData.date"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="时间：">
          <el-slider
            :format-tooltip="formatTooltip"
            @input="resetCurrentTime"
            :max="1000 * 60 * 60 * 24"
            :min="0"
            :step="1"
            v-model="formData.time"
          ></el-slider>
        </el-form-item>
      </el-form>
      <div class="sunshine-btn">
        <div @click="activeTool(controlBtnText)">
          {{ controlBtnText }}
        </div>
        <div @click="activeTool(stopBtnText)">
          {{ stopBtnText }}
        </div>
      </div>
    </div>
  </Temp>
</template>

<script>
import Temp from '../temp'
import { getAction } from '@/utils/helper'

const sunshine = {}
export default {
  components: {
    Temp
  },
  inject: ['viewerId'],
  data() {
    return {
      iconSize: 20,
      activeColor: 'rgba(0, 210, 255, 1)',
      defaultColor: '#D2E6F0',
      active: '',
      controlBtnText: '开始',
      stopBtnText: '重置',
      formData: {
        date: '',
        time: 0
      }
    }
  },
  async created() {
    const { toolManager } = await getAction(this.viewerId)
    sunshine[this.viewerId] = toolManager.sunshine
    this.formData.date = this.formatDate(new Date())
  },
  methods: {
    close() {
      this.$emit('close')
    },
    clear() {
      sunshine[this.viewerId].clear()
      this.controlBtnText = '开始'
      this.formData.time = 0
    },
    activeTool(title) {
      if (!sunshine[this.viewerId]) return
      switch (title) {
        case '开始':
          if (!this.formData.date) {
            this.$message.error('请选择日期')
            break
          }
          this.controlBtnText = '暂停'
          sunshine[this.viewerId].onClock(this.clockFn)
          sunshine[this.viewerId].start({
            startTime: Cesium.JulianDate.fromDate(
              new Date(this.formData.date)
            ),
            stopTime: Cesium.JulianDate.fromDate(
              new Date(
                new Date(this.formData.date).getTime() +
                  1000 * 60 * 60 * 24
              )
            ),
            currentTime: Cesium.JulianDate.fromDate(
              new Date(
                new Date(this.formData.date).getTime() +
                  this.formData.time
              )
            )
          })
          break
        case '暂停':
          this.controlBtnText = '继续'
          sunshine[this.viewerId].pause()
          break
        case '继续':
          this.controlBtnText = '暂停'
          sunshine[this.viewerId].start({
            startTime: Cesium.JulianDate.fromDate(
              new Date(this.formData.date)
            ),
            stopTime: Cesium.JulianDate.fromDate(
              new Date(
                new Date(this.formData.date).getTime() +
                  1000 * 60 * 60 * 24
              )
            ),
            currentTime: Cesium.JulianDate.fromDate(
              new Date(
                new Date(this.formData.date).getTime() +
                  this.formData.time
              )
            )
          })
          break
        case '重置':
          this.clear()
          break
        default:
          break
      }
    },
    clockFn(clock) {
      const date = new Date(clock.currentTime.toString())
      this.formData.time =
        date.getTime() % (1000 * 60 * 60 * 24)
    },
    formatTooltip(value) {
      const date = new Date(value)
      const hour = date.getHours()
      const minute = date.getMinutes()
      const second = date.getSeconds()
      return `当前时间：${hour < 10 ? '0' + hour : hour}:${
        minute < 10 ? '0' + minute : minute
      }:${second < 10 ? '0' + second : second}`
    },
    resetCurrentTime(time) {
      if (sunshine[this.viewerId]) {
        if (this.controlBtnText === '开始') {
          sunshine[this.viewerId].init({
            startTime: Cesium.JulianDate.fromDate(
              new Date(this.formData.date)
            ),
            stopTime: Cesium.JulianDate.fromDate(
              new Date(
                new Date(this.formData.date).getTime() +
                  1000 * 60 * 60 * 24
              )
            ),
            currentTime: Cesium.JulianDate.fromDate(
              new Date(
                new Date(this.formData.date).getTime() +
                  this.formData.time
              )
            )
          })
        } else {
          sunshine[this.viewerId].updateCurrentTime(
            Cesium.JulianDate.fromDate(
              new Date(
                new Date(this.formData.date).getTime() +
                  time
              )
            )
          )
        }
      }
    },
    formatDate(t) {
      if (t instanceof Date) {
        const year = t.getFullYear()
        let month = t.getMonth() + 1
        month = month < 10 ? '0' + month : month
        let day = t.getDate()
        day = day < 10 ? '0' + day : day
        // console.log(year, month, day)
        return `${year}-${month}-${day}`
      }
      return ''
    }
  }
}
</script>

<style lang="scss" scoped>
.sunshine {
  display: flex;
  flex-direction: column;
  padding: 4px 0;

  .form {
    width: 300px;

    ::v-deep {
      .el-form-item {
        display: flex;
        align-items: center;
        margin-bottom: 0;
      }

      .el-date-editor {
        width: 100%;
      }

      .el-form-item__label {
        color: #fff;
        padding: 0;
        display: flex;
        align-items: center;
        line-height: unset;
      }

      .el-form-item__content {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 6px;
        height: 34px;
        margin-left: 0 !important;
      }

      .el-input__inner {
        height: 28px;
        text-align: center;
        background-color: transparent;
        border-color: rgba(255, 255, 255, 0.3);
        color: #fff;
      }

      .el-slider {
        width: calc(100% - 10px);

        .el-slider__runway {
          height: 4px;
          margin: 0;
          background: #e9e9e9;

          .el-slider__bar {
            height: 4px;
            background: #00baff;
          }

          .el-slider__button-wrapper {
            height: 10px;
            width: 10px;
            top: -9px;

            .el-slider__button {
              background: #00baff;
            }
          }
        }

        .el-slider__button {
          width: 10px;
          height: 10px;
          border: none;
        }
      }
    }
  }

  &-btn {
    display: flex;
    align-items: center;
    padding-left: 50px;

    & > div {
      background: #0c87a8;
      border-radius: 2px;
      font-size: 14px;
      padding: 2px 20px;
      cursor: pointer;
    }

    div + div {
      margin-left: 10px;
    }
  }
}
</style>
